<template>
    <div>
      <span>
      用户名：
      <input type="text" v-model.lazy="name" />
      </span>
      <span>{{tip}}</span>
    </div>
  </template>
  <script>
    import {setup,ref,watch} from "vue"
    export default{
      setup(){
        const name=ref("")
        const tip=ref("")
        watch(name,(newValue,oldValue)=>{
          console.log(`旧值是:${oldValue},新值是:${newValue}`)
          setTimeout(function () {
            if (newValue=="admin") {
              tip.value="用户名已经存在，请更换一个"
            }else{
              tip.value="用户名可以使用"
            }
          }, 1000);
        })
        return {
          name,
          tip
        }
      }
    }
  </script>